<template>
  <div class="user-main">
      <el-menu
          router
          :default-active="$route.path"
          background-color="#79bbff"
          text-color="#303133"
          class="el-menu"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          active-text-color="#ffd04b"
      >

        <el-menu-item index="/">XGXD</el-menu-item>

        <div class="flex-grow" />
        <el-sub-menu >
          <template #title>全部</template>
          <el-menu-item index="/user/shop"><el-icon><GoodsFilled /></el-icon>球星卡</el-menu-item>
          <el-menu-item index="/user/forum"><el-icon><Coin /></el-icon>论坛</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/admin" v-if="showAdmin"><el-icon><GoodsFilled /></el-icon>进入管理</el-menu-item>
        <el-menu-item index="/user/shop"><el-icon><GoodsFilled /></el-icon>商城</el-menu-item>
        <el-menu-item index="/user/cart"><el-icon><ShoppingCart /></el-icon>购物车</el-menu-item>
        <el-menu-item index="/user/forum"><el-icon><Coin /></el-icon>论坛</el-menu-item>
        <el-menu-item @click="drawer">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
          &nbsp&nbsp
          <span > {{ state }} </span>

<!--          抽屉-->
          <el-drawer v-model="indrawer"  size="26%" :with-header="false" class="drawer"
                     :visible="value1"
                     :style="{ backgroundColor: value1 ? '#FAD4FF' : '#D4F6F9' }">
            <!-- 头像里面的内容-->
            <div class="drawer-main" >
              <div style="text-align: center">
                <span >用户信息</span>
                <br>
                <el-switch
                    v-model="value1"
                    @change="drawerSw"
                    size="large"
                    :active-action-icon="SwitchFilled"
                    :inactive-action-icon="SwitchFilled"
                />
              </div>

              <el-form :model="user" >
                <el-form-item label="用户名" :label-width="formLabelWidth" disabled >
                  <el-input  v-model="user.username"  :readonly="true" ></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth" >
                  <el-input v-model="user.phone" :readonly="true" />
                </el-form-item>
                <el-form-item label="收货姓名" :label-width="formLabelWidth">
                  <el-input v-model="user.name" :readonly="true" placeholder="请输入收货姓名"/>
                </el-form-item>
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                  <el-input v-model="user.address" :readonly="true" placeholder="请输入收货地址"/>
                </el-form-item>
              </el-form>


            </div>
            <div style="text-align: center;margin-top: 200px">
              <el-button  plain color="#F93C3C" @click="dialogFormVisible = true" >修改用户信息</el-button>
              <br>
              <el-button  round color="#96E7FF" @click="goOut">退出登录</el-button>
            </div>
            <!-- 回调修改数据-->
            <el-dialog v-model="dialogFormVisible" title="修改用户信息" width="600" center draggable>
              <el-form :model="user">
                <el-form-item label="用户名" :label-width="formLabelWidth  ">
                  <el-input  v-model="user.username" autocomplete="off" disabled />
                </el-form-item>

                <el-form-item label="手机号码" :label-width="formLabelWidth">
                  <el-input v-model="user.phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="收货姓名" :label-width="formLabelWidth">
                  <el-input v-model="user.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                  <el-input v-model="user.address" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="setdata">关闭</el-button>
                  <el-button type="primary" @click="getdata(from)">
                    提交
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </el-drawer>
        </el-menu-item>
      </el-menu>
      <router-view/>

  </div>
</template>

<script setup>
import {Phone} from '@element-plus/icons-vue'
import router from "../../router";
import { useUserStore } from "../../stores";
import {onBeforeMount, ref , inject} from 'vue'
import {ElMessage} from "element-plus";
import * as userApi from "@/api/user.js"
import img1 from "@/assets/img/user/forum.jpg"
import { SwitchFilled } from '@element-plus/icons-vue'
const value1 = ref(false)
const showAdmin = ref(false)
const userStore = useUserStore()
const reload = inject('reload')
const dialogFormVisible = ref(false)
const formLabelWidth = '100px'
const indrawer=ref(false)
const state=ref('我的')
const user=ref() //用来展示
const from=ref() //用来修改提交

const goOut=()=>{
  userStore.removeToken()
  state.value = "我的"
  reload()
  indrawer.value=false
  ElMessage({showClose: false, message: '退出成功', type: 'success'})
  router.push('/')
}

const drawer=()=>{
  if (!userStore.token){
    router.push('/login')
  }else {
    indrawer.value=true
  }
}
onBeforeMount(()=>{
  if (userStore.token){
    userApi.getUserById().then(resp=>{
      user.value = resp.data
      from.value= resp.data
      state.value = user.value.name
      if (user.value.admin == 1){
        showAdmin.value = true
      }

    })
  }
},)

const drawerSw = (value1)=>{
  if (value1){

  }
}
const getdata =(from)=>{
  userApi.updata(from).then(resp=>{
    if (resp.code===1){
      ElMessage({showClose: false, message: '更新成功', type: 'success'})
      reload()
    }else {
      ElMessage({showClose: false, message: '更新失败', type: 'error'})
    }
  })
}
const setdata =()=>{
  reload()
}

</script>

<style scoped>
.user-main{
  margin: 0;
  background-color: #99a9bf;
  width: 100%;
  position: absolute;
  transform-origin: center center;
}
.el-menu{

}
.flex-grow {
  flex-grow: 1;
}


/*改变el-input的背景*/
::v-deep .el-input__wrapper {
  background-color: transparent !important;
}
/*!*改变el-input里的字体*!*/
/*::v-deep input::-webkit-input-placeholder {*/
/*  color: plum;*/
/*}*/



.drawer-sw::before,
.drawer-sw::after{
  content: '';
  display: inline-block;
  border-top: 1px solid rgba(0,0,0,0.1);
  width: 150px;
  margin: 5px;
}

</style>
